.container {
  display: flex;
  height: 600px;
  :global {
    #canvas {
      height: 600px;
    }

    .node {
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: relative;

      .sector {
        position: absolute;
        left: 0;
        top: 0;
        width: 208px;
        height: 208px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }
  
      .content {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #00ADFF;
        z-index: 10;
        padding: 30px 10px;
        color:#fff;
        font-size: 12px;
        word-wrap:break-word;
        word-break: normal;
        overflow: hidden;
        user-select: none;
      }

      .col {
        display: none;
        overflow: hidden;
        img {
          position: absolute;
          right: 20px;
          top: 65px;
          z-index: 5;
          width: 18px;
        }
        .sx1 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(60deg) skewY(-30deg);
          background: #F3F3F3;
        }
        .sx2 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(.5deg) skewY(-30deg);
          background: #F3F3F3;
        }

        &:hover {
          .sx1 {
            background: #D8D8D8;
          }
    
          .sx2 {
            background: #D8D8D8;
          }
        }
      }

      .blood {
        display: none;
        overflow: hidden;

        img {
          position: absolute;
          left: 20px;
          top: 65px;
          z-index: 5;
          width: 18px;
        }

        .sx1 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(-60deg) skewY(-30deg);
          background: #F3F3F3;
        }
        .sx2 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(-119.5deg) skewY(-30deg);
          background: #F3F3F3;
        }

        
        &:hover {
          .sx1 {
            background: #D8D8D8;
          }
    
          .sx2 {
            background: #D8D8D8;
          }
        }
      }

      .effect {
        display: none;
        overflow: hidden;

        img {
          position: absolute;
          bottom: 10px;
          left: 95px;
          z-index: 5;
          width: 18px;
        }


        .sx1 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(120.5deg) skewY(-30deg);
          background: #F3F3F3;
        }
        .sx2 {
          position: absolute;
          top: 0; 
          right: 0;
          width: 50%;
          height: 50%;
          transform-origin: 0% 100%;
          transform: rotate(180deg) skewY(-30deg);
          background: #F3F3F3;
        }

        &:hover {
          .sx1 {
            background: #D8D8D8;
          }
    
          .sx2 {
            background: #D8D8D8;
          }
        }
      }

      .line1 {
        display: none;
        position: absolute;
        top: 0;
        width: 2px;
        height: 52px;
        background: #fff;
        z-index: 4;
      }
      .line2 {
        display: none;
        position: absolute;
        top: 114px;
        right: 34px;
        width: 2px;
        height: 58px;
        transform: rotate(120deg);
        background: #fff;
        z-index: 4;
      }
      .line3 {
        display: none;
        position: absolute;
        top: 114px;
        left: 35px;
        width: 2px;
        height: 58px;
        transform: rotate(240deg);
        background: #fff;
        z-index: 4;
      }

      &:hover {
        .content {
          width: 136px;
          height: 136px;
          border: 10px solid rgba(255, 255, 255);
          font-size: 16px;
          padding: 30px 20px;
        }

        .blood, .col, .effect {
          display: block;
        }

        .line1, .line2, .line3 {
          display: block;
        }
      }
    }


    .circle, .path, image {
      cursor: pointer;
    }
  }
}

.circle {
  cursor: pointer;
}

.path {
  cursor: pointer;
  &:hover {
    stroke: #DDD;
  }
}

.g {
  width: 200px;
  height: 200px;
  .path {
    display: none;
  }

  image {
    display: none;
  }

  &:hover {
    .circle {
      r: 68;
    }

    .path, .image {
      display: block;
    }
  }

  
}

:global {
  .g6-component-tooltip {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0px 10px 24px 10px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
  
}
